<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位管理系统</title>
    <script src="static/js/jquery-3.4.1.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style type="text/css">
        body {
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        .table-container {
            margin: 20px;
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式优化 */
        .layui-table {
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
        }

        .layui-table td, .layui-table th {
            padding: 12px 15px;
            vertical-align: middle;
        }

        .layui-table th {
            font-weight: 500;
            background-color: #f8f8f8;
        }

        .layui-table-cell {
            height: auto;
            min-height: 36px;
            line-height: 1.5;
            padding: 8px 12px;
        }

        /* 固定列宽确保对齐 */
        .layui-table colgroup col:nth-child(1) { width: 80px; }  /* ID */
        .layui-table colgroup col:nth-child(2) { width: 180px; } /* 职位名称 */
        .layui-table colgroup col:nth-child(3) { width: 300px; } /* 职位描述 */
        .layui-table colgroup col:nth-child(4) { width: 180px; } /* 创建时间 */
        .layui-table colgroup col:nth-child(5) { width: 150px; } /* 操作 */

        .layui-table-tool {
            background-color: transparent;
            border-bottom: 1px solid #f0f0f0;
        }

        .layui-table-tool-temp {
            padding: 15px 0;
        }

        .layui-table-page {
            padding: 15px 0;
            text-align: center;
        }

        .layui-btn-xs {
            padding: 0 10px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
        }

        /* 弹窗表单样式 */
        .layui-form-item .layui-input-block {
            margin-left: 110px;
        }

        .layui-form-label {
            width: 100px;
            text-align: left;
            padding-left: 0;
        }

        .layui-layer-btn .layui-btn {
            height: 36px;
            line-height: 36px;
            padding: 0 18px;
        }
    </style>
</head>
<body>

<!-- 表格区域 -->
<div class="table-container">
    <table class="layui-hide" id="position-table" lay-filter="position-table"></table>
</div>

<!-- 添加职位表单模板 -->
<script type="text/html" id="position-insert">
    <form class="layui-form" method="post" style="padding: 20px 30px 0 0">
        <div class="layui-form-item">
            <label class="layui-form-label">职位名称</label>
            <div class="layui-input-block">
                <input id="position-name" type="text" name="name" required lay-verify="required"
                       placeholder="请输入职位，如：Java开发工程师" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">职位描述</label>
            <div class="layui-input-block">
                <textarea id="position-description" name="description"
                          placeholder="请输入职位描述" class="layui-textarea" style="min-height: 100px;"></textarea>
            </div>
        </div>
    </form>
</script>

<!-- 工具栏模板 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="addPosition">
            <i class="layui-icon layui-icon-add-1"></i> 添加职位
        </button>
    </div>
</script>

<!-- 操作列模板 -->
<script type="text/html" id="barTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
        <i class="layui-icon layui-icon-ok"></i> 保存
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<script>
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        // 渲染表格
        table.render({
            elem: '#position-table',
            url: '/positions',
            toolbar: '#toolbar',
            parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.size,
                    data: res.data
                }
            },
            cols: [[
                {field: 'id', title: 'ID', sort: true},
                {field: 'name', title: '职位名称', edit: true},
                {field: 'description', title: '职位描述', edit: true},
                {field: 'createdTime', title: '创建时间', sort: true},
                {fixed: 'right', title: '操作', align: 'center', toolbar: '#barTpl'}
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50]
        });

        // 工具栏事件
        table.on('toolbar(position-table)', function (obj) {
            switch(obj.event) {
                case 'addPosition':
                    layer.open({
                        title: '添加职位',
                        content: $("#position-insert").html(),
                        area: ["500px", "350px"],
                        btn: ['提交', '取消'],
                        btnAlign: 'c',
                        yes: function(index, layero) {
                            var name = $("#position-name").val();
                            var description = $("#position-description").val();

                            if (!name) {
                                layer.tips('职位名称不能为空', '#position-name', {tips: [1, '#FF5722']});
                                return;
                            }
                            if (!description) {
                                layer.tips('职位描述不能为空', '#position-description', {tips: [1, '#FF5722']});
                                return;
                            }

                            var nowDate = new Date();
                            $.ajax({
                                url: '/positions',
                                method: 'post',
                                data: {
                                    name: name,
                                    description: description,
                                    createdTime: nowDate
                                },
                                success: function (res) {
                                    if (res.code == 200) {
                                        var dataBak = [];
                                        var tableBak = table.cache['position-table'];
                                        for (var i = 0; i < tableBak.length; i++) {
                                            dataBak.push(tableBak[i]);
                                        }
                                        dataBak.push({
                                            id: res.data.id,
                                            name: name,
                                            description: description,
                                            createdTime: nowDate
                                        });
                                        table.reload("position-table", {
                                            data: dataBak
                                        });
                                        layer.msg('新建职位成功', {icon: 1});
                                        layer.close(index);
                                    } else {
                                        layer.msg('新建职位失败: ' + res.msg, {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.msg('请求失败，请稍后重试', {icon: 2});
                                }
                            });
                        }
                    });
                    break;
            }
        });

        // 监听工具条(右侧)
        table.on('tool(position-table)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('确定要删除职位 "' + data.name + '" 吗？', {
                    icon: 3,
                    title: '删除确认',
                    btn: ['确定', '取消']
                }, function(index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/positions/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg('删除成功', {icon: 1});
                            } else {
                                layer.msg('删除失败: ' + res.msg, {icon: 2});
                                table.reload("position-table");
                            }
                        },
                        error: function() {
                            layer.msg('请求失败，请稍后重试', {icon: 2});
                            table.reload("position-table");
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                $.ajax({
                    url: '/positions',
                    method: 'put',
                    data: JSON.stringify({
                        id: data.id,
                        name: data.name,
                        description: data.description
                    }),
                    contentType: "application/json",
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg('更新成功', {icon: 1});
                            obj.update({
                                name: data.name,
                                description: data.description
                            });
                        } else {
                            layer.msg('更新失败: ' + res.msg, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败，请稍后重试', {icon: 2});
                    }
                });
            }
        });
    });
</script>
</body>
</html>